@import './lib/reset.scss'; //导入基础库文件
html, body, .container {
  @include rect(100%, 100%); // 宽为100%, 高为100%
}
.container {
  @include flexbox(); // display:flex以及它的兼容写法
  @include flex-direction(column); // flex-direction: column 以及兼容写法
  .box {
    @include flex(); // flex:1 以及兼容写法
    @include rect(100%, auto);
    @include flexbox(); // display:flex以及它的兼容写法
    @include flex-direction(column); // flex-direction: column 以及兼容写法
    .header{
      @include rect(100%, 0.44rem);
      @include background-color(#6666FF);
      border-radius:3px;
      @include flexbox();
      @include text-color(#fff);
      @include line-height(0.44rem);
      .header-button {
        @include rect(60px, 100%);
        @include text-align();

        &.isleft {
          @include text-align(left);
          @include padding(0 0 0 10px);
        }
      }
      .header-title {
        @include flex();
        @include text-align();
      }
    }
    .content {
      @include flex(); 
      @include rect(100%, auto);
      @include overflow();
    }
  }
  .footer {
    @include rect(100%, 0.5rem);
    @include background-color(#ccc);
  }
  .detail-img{
     width: 100%;
     height: 200px;
  }
.kind-header{
      width:100%;
      height:0.44rem;
}
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all .5s;
}
.slide-enter-to, .slide-leave {
  transform: translateX(0%);
}
.slide-leave-active {
  transition: all 0s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-active {
  transition: all .7s;
}
.fade-enter-to, .fade-leave {
  opacity: 1;
}
.fade-leave-active {
  transition: all 0s;
}